<template>
  <div class="content-block block-half-2">
    <div class="info-head">{{ title }}</div>
    <div class="info-content" ref="container">
      <v-chart
        ref="chart"
        :option="chartOption"
        style="width: 100%; height: 400px"
      ></v-chart>
    </div>
  </div>
</template>

<script>
import ChartResizeListener from '@/mixins/chart-resize-listener';
import MixinChartOptionToolbox from '@/mixins/chart-option-toolbox';
import { pieTooltipFormatter, defaultNumber } from '@/utils';

export default {
  name: 'grid-item-three',
  mixins: [ChartResizeListener, MixinChartOptionToolbox],
  props: {
    title: String,
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    chartOption() {
      return {
        legend: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: pieTooltipFormatter
        },
        grid: {
          // containLabel: true,
          top: '70px'
        },
        toolbox: this.getChartOptionToolbox({
          feature: {
            magicType: null,
          }
        }),
        series: [
          {
            name: this.title,
            type: 'pie',
            radius: [70, 130],
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 8
            },
            data: this.data.data || []
          }
        ]
      };
    }
  },
  methods: {
    optionToContent (opt) {
      try {
        const data = [
          ['能源名称', '单位', '数值'],
          ...opt.series[0].data.map(item => [item.name, item.unit, defaultNumber(item.value)])
        ];
        return this.generateTable(data);
      } catch (e) {
        console.warn(e);
      }
    }
  }
};
</script>
